<template>
	<view class="newsContent">
		<view class="box">
			<view class="icon">
				<view class="iconfont icon-ziyuan191 img">
					
				</view>
				<view class="text">
					粉丝
				</view>
			</view>
			<view class="icon">
				<view class="iconfont icon-love img">
					
				</view>
				<view class="text">
					爱心
				</view>
			</view>
			<view class="icon">
				<view class="iconfont icon-pinglun1 img">
					
				</view>
				<view class="text">
					评论
				</view>
			</view>
			<view class="icon">
				<view class="iconfont icon-hudong img">
					
				</view>
				<view class="text">
					动态互动
				</view>
			</view>
		</view>
		<view class="newsList">
			<view class="item" v-for="(value,index) in newsList" :key="index">
				<view class="author-img-box">
					<image class="author-img" :src="imgList[value.id-1].imgSrc" mode=""></image>
				</view>
				<view class="textNews">
					<view class="top">
						<view class="name">
							{{value.name}}
						</view>
						<view class="time">
							{{value.time}}
						</view>
					</view>
					<view class="content">
						{{value.content}}
					</view>
				</view>
			</view>
			<view class="more">
				无更多消息
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"newsContent",
		data() {
			return {
				imgList:[
					{
						id:1,
						imgSrc:"http://localhost:8099/static/宇航员1.jpg",
					},
					{
						id:2,
						imgSrc:"http://localhost:8099/static/宇航员1.jpg",
					},
					{
						id:3,
						imgSrc:"http://localhost:8099/static/宇航员1.jpg",
					}
				],
				newsList:[
					{
						id:1,
						name:'张三',
						time:'2021-5-13',
						content:'您好！我是张三，很高兴认识你！'
					},
					{
						id:2,
						name:'李四',
						time:'2021-6-14',
						content:'您好！我是李四，很高兴认识你！'
					},
					{
						id:3,
						name:'王五',
						time:'2021-7-15',
						content:'您好！我是王五，很高兴认识你！'
					}
				]
			};
		}
	}
</script>

<style>
.newsContent{
	color: #fff;
	
}
.box{
	height: 120px;
	width: 100%;
}
.icon{
	width: 25%;
	float: left;
	height: 45px;
	line-height: 45px;
	text-align: center;
}
.text{
	text-align: center;
	font-size: 12px;
}
.img{
	background-color: blue;
	height: 30px;
	width: 30px;
	line-height: 30px;
	padding:10px;
	border-radius: 5px;
	font-size: 25px;
	margin:0 auto;
}
.newsList{
	color:#fff;
}
.item{
	height: 60px;
	padding:15px 10px;
}
.author-img-box{
	float: left;
	margin-left: 10px;
}
.author-img{
	width: 45px;
	height: 45px;
	border-radius: 50%;
}
.textNews{
	float: left;
	margin-left: 15px;
	height:50px;
	width:75%;
	color: #fff;
}
.top{
	height:25px;
	line-height:25px;
}
.name{
	float:left;
	font-size: 18px;
}
.time{
	float: right;
	font-size: 11px;
	color:#aaa;
}
.content{
	height: 25px;
	line-height: 25px;
	font-size: 12px;
	color: #aaa;
}
.more{
	width: 100%;
	height: 50px;
	line-height: 50px;
	font-size: 12px;
	text-align: center;
	color: #AAAAAA;
}
</style>
